/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-04-23 13:31:52
 * @LastEditTime : 2023-07-26 08:40:56
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\Workstation\TablePage.jsx
 * @Description  :
 */

import request from 'umi-request'
import { message } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { useEventEmitter, useSize } from 'ahooks'

import { ModalBox } from '../../../../Modal/ModalBox'
import { ExportExcel } from '../../../../Configure/QRcode'
import { FlowForm } from './FlowForm'

export const TablePage = ({ flow, selectType }) => {
    const headers = { Authorization: sessionStorage.getItem('TOKEN') }
    const [messageApi, contextHolder] = message.useMessage()
    const tableBox = useRef(null)
    const BoxSize = useSize(tableBox)
    const actionRef = useRef()
    const formRef = useRef()
    const OptionsEvent = useEventEmitter()
    const [configure, setConfigure] = useState()
    const [IndexNumber, setIndexNumber] = useState(1)
    const [SizeNumber, setSizeNumber] = useState(10)
    const [OptionsCall, setOptionsCall] = useState()

    useEffect(() => {
        const getUrlData = async () => {
            let data = await FlowForm({ OptionsEvent, flow, selectType, actionRef })
            setSizeNumber(data.pageSize)
            setConfigure(data)
        }
        getUrlData()
    }, [OptionsEvent, messageApi, flow, selectType])

    OptionsEvent.useSubscription(val => {
        //
        // selectExcel={formRef.current.getFieldsValue()}
        const { type, data } = val
        switch (type) {
            case 'SelectExcel':
                console.log(data)
                // ExportExcel(data.api, formRef.current.getFieldsValue())
                break
            default:
                setOptionsCall(val)
                break
        }
    })

    return (
        <div className="ListPagesBox" ref={tableBox}>
            {contextHolder}
            {BoxSize && configure && (
                <ProTable
                    actionRef={actionRef}
                    formRef={formRef}
                    rowKey="uuid"
                    columns={configure.columns}
                    cardBordered
                    params={configure?.params}
                    request={async (params = {}) => {
                        delete params.current
                        params.pageIndex = IndexNumber ?? 1
                        if (params.SearchSort) {
                            const { SearchSort } = params
                            SearchSort.forEach((item, index) => {
                                const [field, sort] = item.split('-')
                                params[field] = `${sort}@${index}`
                            })
                            delete params.SearchSort
                        }
                        return request(configure.get, { params, headers }).then(data => {
                            if (data.list) return { data: data.list, total: data.total, success: true }
                            else return { data, success: true }
                        })
                    }}
                    search={
                        configure.hideInSearch
                            ? false
                            : { optionRender: (searchConfig, formProps, dom) => [...dom.reverse()] }
                    }
                    pagination={{
                        pageSize: SizeNumber,
                        showSizeChanger: true,
                        onChange: (e, a) => {
                            setIndexNumber(e)
                            setSizeNumber(a)
                        },
                    }}
                    dateFormatter="string"
                    toolBarRender={() => configure.options}
                    scroll={(() => {
                        let { width: x, height } = BoxSize
                        const { hideInSearch } = configure
                        let y = hideInSearch === undefined ? height - 310 : height - 215
                        return { x, y }
                    })()}
                />
            )}
            <ModalBox OptionsCall={OptionsCall} actionRef={actionRef} configure={configure} />
        </div>
    )
}
